<template>
  <view class="news-page">
    <!-- 顶部搜索和发布区域 -->
    <view class="header">
      <view class="search-container" :class="{ focused: searchFocused }">
		  <!-- 修正后 -->
		  <u-input
		    type="text" 
		    placeholder="搜索资讯" 
		    v-model="searchKeyword"
		    class="search-input"
		    @focus="handleInputFocus" 
		    @blur="handleInputBlur"
		  ></u-input> <!-- @confirm="handleSearch"  -->
		<view class="width:80rpx">
			<u-button
			  class="search-btn" 
			  @click="handleSearch"
			  :disabled="!searchKeyword.trim()"
			  size="mini"
			  shape="circle"
			  :loading="isSearching"
			  plain="true"
			  text="搜索"
			  type="primary"
			>
			  
			</u-button>
			
		</view>
       
      </view>
	  <view> 
	 <!-- <u-button 
        class="publish-btn" 
        @click="gotoPublish" 
		 size="mini"
        shape="circle"
		plain="true"
        hover-class="publish-btn-hover"
		type="success"
		text="发布"
      >
        
      </u-button> -->
	  <u-icon name="plus-circle" size="28" color="#00aa00" class="empty-icon" @click="gotoPublish" label="发布" labelSize="20" labelPos="bottom"></u-icon>
	  </view>
     
    </view>

    <!-- 搜索历史弹窗 -->
    <u-popup 
      mode="bottom" 
      :closeable="false"
      :mask="false"
      class="search-history-popup"
	  :show="showSearchHistory"
    >
      <view class="search-history">
        <view class="history-header">
          <text class="history-title">搜索历史</text>
          <text 
            class="clear-history" 
            @click="clearSearchHistory"
            :class="{ disabled: !searchHistory.length }"
          >
            清除历史
          </text>
        </view>
        <view class="history-tags" v-if="searchHistory.length > 0">
          <view 
            class="history-tag" 
            v-for="(item, index) in searchHistory" 
            :key="index"
            @click="searchByHistory(item)"
            @longpress="showRemoveHistoryItem(index)"
          >
            {{ item }}
            <u-icon 
              name="close" 
              size="16" 
              color="#999" 
              class="tag-close"
              @click.stop="removeHistoryItem(index)"
            ></u-icon>
          </view>
        </view>
        <view class="history-empty" v-else>
          <u-icon name="search" size="48" color="#eee" class="empty-icon"></u-icon>
          <text>暂无搜索历史</text>
        </view>
      </view>
    </u-popup>

    <!-- 导航栏 -->
    <view class="category-scroll">
      <scroll-view 
        scroll-x 
        class="category-container" 
        show-scrollbar="false"
        :scroll-with-animation="true"
      >
        <view 
          class="category-item" 
          :class="{ active: activeCategory === category.id }"
          v-for="category in displayCategories" 
          :key="category.id"
          @click="switchCategory(category.id)"
        >
          {{ category.name }}
          <view class="category-indicator" v-if="activeCategory === category.id"></view>
        </view>
        
        <!-- 编辑按钮 -->
        <view 
          class="category-item edit-category" 
          @click="handleEditClick"
          hover-class="edit-category-hover"
          :hover-stay-time="150"
        >
          <u-icon name="setting" size="20" color="#ff2442"></u-icon>
          <text>编辑</text>
        </view>
      </scroll-view>
    </view>

    <!-- 内容列表 -->
    <view class="news-list">
      <view 
        class="news-item article-item" 
        v-for="(item, index) in filteredNews" 
        :key="index"
        @click="gotoDetail(item)"
        :class="{ 'last-item': index === filteredNews.length - 1 }"
      >
        <!-- 文章类型标签 -->
        <view class="news-type" v-if="item.type === 'article'">
          文章
        </view>
        <view class="news-type micro-type" v-if="item.type === 'micro'">
          微头条
        </view>
        
        <view class="article-content">
			
          <text class="article-title" v-if="item.type === 'article'">{{ item.title }}</text>
          
          <!-- 多图布局 -->
          <view class="article-images multi-images" v-if="item.images && item.images.length > 1">
            <image 
              :src="img" 
              mode="aspectFill"
              class="multi-img"
              :alt="item.title"
              v-for="(img, idx) in item.images" 
              :key="idx"
              lazy-load
            ></image>
          </view>
          
          <!-- 单图布局 -->
          <view class="article-single" v-if="item.images && item.images.length === 1">
            <text class="article-desc">{{ item.desc }}</text>
            <image 
              :src="item.images[0]" 
              mode="aspectFill"
              class="single-img"
              :alt="item.title"
              lazy-load
            ></image>
          </view>
          
          <!-- 无图布局 -->
          <view class="article-desc" v-if="!item.images || item.images.length === 0">
            {{ item.desc }}
          </view>
        </view>
        
        <view class="article-footer">
          <text class="article-source">{{ item.author }}</text>
          <text class="article-time">{{ item.time }}</text>
          <view class="article-stats">
            <view class="stat-item" @click.stop="handleStatClick('view', item)">
              <u-icon name="eye" size="18" color="#999"></u-icon>
              <text class="stat-text">{{ formatNumber(item.views) }}</text>
            </view>
            <view class="stat-item" @click.stop="handleStatClick('comment', item)">
              <u-icon name="message" size="18" color="#999"></u-icon>
              <text class="stat-text">{{ formatNumber(item.comments) }}</text>
            </view>
            <view class="stat-item" @click.stop="handleStatClick('like', item)">
              <u-icon 
                name="heart" 
                size="18" 
                :color="item.liked ? '#ff2442' : '#999'"
                :class="{ 'liked-icon': item.liked }"
              ></u-icon>
              <text class="stat-text">{{ formatNumber(item.likes) }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="!isLoading && filteredNews.length === 0">
        <u-icon name="list" size="64" color="#eee" class="empty-list-icon"></u-icon>
        <text class="empty-text">暂无相关资讯</text>
        <u-button 
          class="empty-refresh" 
          size="mini" 
          shape="circle"
          @click="refreshNews"
        >
          刷新
        </u-button>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && filteredNews.length > 0">
      <view class="loading" v-if="isLoading">
        <u-loading icon="spin" size="24" color="#ff2442"></u-loading>
        <text class="loading-text">加载中...</text>
      </view>
      <u-button 
        class="load-more-btn" 
        v-else 
        @click="loadMore"
        size="mini"
        shape="circle"
        plain
        hover-class="load-more-hover"
      >
        加载更多
      </u-button>
    </view>

    <!-- 类目编辑弹窗 -->
    <u-popup 
      :show="showCategoryEdit"
      mode="bottom" 
      class="category-edit-popup"
	  :closeOnClickOverlay="true"
	  @close="closeCategory"
    >
      <view class="category-edit-dialog">
        <view class="dialog-header">
          <text class="dialog-title">频道管理</text>
          <u-icon 
            name="close" 
            size="24" 
            color="#999" 
            class="dialog-close"
            @click="showCategoryEdit = false"
            hover-class="dialog-close-hover"
          ></u-icon>
        </view>
        
        <view class="dialog-section">
          <text class="section-title">我的频道</text>
          
          <view class="selected-categories">
            <view 
              class="selected-category"
              v-for="(item, index) in displayCategories" 
              :key="item.id"
              v-if="item.id !== 0"
              :class="{ 'sortable-ghost': isDragging && dragIndex === index }"
              @longpress="startDrag(index)"
              
            >
			<!-- @touchmove="handleDragMove"
			@touchend="stopDrag" -->
             <!-- <u-icon 
                name="move" 
                size="18" 
                color="#ccc"
                class="drag-icon"
              ></u-icon> -->
              <text class="category-name">{{ item.name }}</text>
              <u-icon 
                name="close" 
                size="20" 
                color="#999"
                class="remove-icon"
                @click.stop="removeCategory(item.id)"
                hover-class="remove-icon-hover"
              ></u-icon>
            </view>
          </view>
        </view>
        
        <view class="dialog-section">
          <text class="section-title">推荐频道</text>
          
          <view class="recommend-categories">
            <view 
              class="recommend-category" 
              v-for="(item, index) in allCategories" 
              :key="item.id"
              v-if="item.id !== 0 && !isCategorySelected(item.id)"
              @click="addCategory(item)"
              hover-class="recommend-category-hover"
            >
              <text>{{ item.name }}</text>
              <u-icon name="plus" size="18" color="#fff" class="plus-icon"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 操作提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 搜索相关
      searchKeyword: '',
      showSearchHistory: false,
      searchHistory: [],
      searchFocused: false,
      isSearching: false,
	  show:true,
	  isCloseOnClickOverlay:true,
      
      // 分类相关
      allCategories: [
        { id: 0, name: '全部' },
        { id: 1, name: 'UHMWPE纤维' },
        { id: 2, name: '芳纶纤维' },
        { id: 3, name: '碳纤维' }
      ],
      displayCategories: [
        { id: 0, name: '全部' },
        { id: 1, name: 'UHMWPE纤维' },
        { id: 2, name: '芳纶纤维' },
        { id: 3, name: '碳纤维' }
      ],
      activeCategory: 0,
      showCategoryEdit: false,
      isDragging: false,
      dragIndex: -1,
      
      // 资讯数据
      newsList: [],
      filteredNews: [],
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      isLoading: false
    };
  },
  
  onLoad() {
    // 加载搜索历史
    this.loadSearchHistory();
    // 加载类目设置
    this.loadCategorySettings();
    // 加载资讯数据
    this.loadNews();
  },
  
  methods: {
    // 搜索相关方法
    handleInputFocus() {
      this.searchFocused = true;
      this.showSearchHistory = true;
    },
    
    handleInputBlur() {
      this.searchFocused = false;
      // 延迟关闭，防止点击历史时立即关闭
      setTimeout(() => {
        if (!this.searchFocused) {
          this.showSearchHistory = false;
        }
      }, 200);
    },
    
    handleSearch() {
      const keyword = this.searchKeyword.trim();
      if (!keyword) {
        this.$refs.uToast.show({
          title: '请输入搜索关键词',
          type: 'warning'
        });
        return;
      }
      
      this.isSearching = true;
      this.showSearchHistory = false;
      
      // 模拟搜索延迟Num
      setTimeout(() => {
        this.addToSearchHistory(keyword);
        this.pageNum = 1;
        this.loadNews(true);
        this.isSearching = false;
      }, 500);
    },
    
    searchByHistory(item) {
      this.searchKeyword = item;
      this.handleSearch();
    },
    
    showRemoveHistoryItem(index) {
      this.$refs.uToast.show({
        title: '长按可删除单条历史',
        position: 'bottom'
      });
    },
    
    removeHistoryItem(index) {
      this.searchHistory.splice(index, 1);
      uni.setStorageSync('newsSearchHistory', this.searchHistory);
    },
    
    loadSearchHistory() {
      const history = uni.getStorageSync('newsSearchHistory');
      this.searchHistory = history || [];
    },
    
    addToSearchHistory(keyword) {
      const index = this.searchHistory.indexOf(keyword);
      if (index !== -1) {
        this.searchHistory.splice(index, 1);
      }
      if (this.searchHistory.length >= 10) {
        this.searchHistory.pop();
      }
      this.searchHistory.unshift(keyword);
      uni.setStorageSync('newsSearchHistory', this.searchHistory);
    },

    clearSearchHistory() {
      if (!this.searchHistory.length) return;
      
      uni.showModal({
        title: '提示',
        content: '确定要清除所有搜索历史吗？',
        success: (res) => {
          if (res.confirm) {
            this.searchHistory = [];
            uni.removeStorageSync('newsSearchHistory');
			this.$refs.uToast.show({
			  title:'清楚搜索历史',	
			  message: `已清除搜索历史`,
			  type: 'success'
			});

          }
        }
      });
    },
    
    // 分类相关方法
    loadCategorySettings() {
      const saved = uni.getStorageSync('newsCategorySettings');
      if (saved && saved.length > 0) {
        this.displayCategories = saved;
      }
    },
    
    isCategorySelected(id) {
      return this.displayCategories.some(cat => cat.id === id);
    },
    closeCategory(){
		this.showCategoryEdit = false
	},
    removeCategory(id) {
      this.displayCategories = this.displayCategories.filter(cat => cat.id !== id);
      
      if (this.activeCategory === id) {
        this.activeCategory = 0;
        this.pageNum = 1;
        this.loadNews(true);
      }
      
      this.saveCategorySettings();

      this.$refs.uToast.show({
		title:'移除频道',
        message: '已移除频道',
        type: 'success'
      });
    },
    
    addCategory(category) {
      if (!this.isCategorySelected(category.id)) {
        const newCategory = { ...category };
        this.displayCategories.push(newCategory);
        this.saveCategorySettings();
        this.$refs.uToast.show({
		  title:'添加频道',	
          message: `已添加${category.name}`,
          type: 'success'
        });
      }
    },
    
    saveCategorySettings() {
      const allCategory = this.displayCategories.find(cat => cat.id === 0);
      if (!allCategory) {
        this.displayCategories.unshift({ id: 0, name: '全部' });
      } else {
        const index = this.displayCategories.indexOf(allCategory);
        if (index !== 0) {
          this.displayCategories.splice(index, 1);
          this.displayCategories.unshift(allCategory);
        }
      }
      
      uni.setStorageSync('newsCategorySettings', this.displayCategories);
      
      if (!this.isCategorySelected(this.activeCategory)) {
        this.activeCategory = 0;
        this.pageNum = 1;
        this.loadNews(true);
      }
    },
    
    switchCategory(categoryId) {
      this.activeCategory = categoryId;
      this.pageNum = 1;
      this.loadNews(true);
    },
    
    // 编辑按钮点击处理 - 修复无响应问题
    handleEditClick() {
      console.log('编辑按钮被点击');
      this.showCategoryEdit = false;
      this.$nextTick(() => {
        this.showCategoryEdit = true;
      });
      var that = this;
      this.$request("api/v1/classList", "get", this.userInfo).then(result => {
        if (result.code === 200) {
          // 1. 确保数据是数组
          let categories = Array.isArray(result.data) ? result.data : [];
          
          // 2. 检查是否包含id=0的"全部"分类，如果没有则添加
          // const hasAllCategory = categories.some(item => item.id === 0);
          // if (!hasAllCategory) {
          //   categories.unshift({ id: 0, name: '全部' });
          // }
          
          // // 3. 确保每个分类都有id和name字段
          // categories = categories.map(item => ({
          //   id: item.id || Date.now() + Math.random(), // 确保有唯一id
          //   name: item.name || `分类${item.id}` // 确保有名称
          // }));
          
          // 4. 赋值前先保存当前活跃分类
          const currentActive = this.activeCategory;
          
          // 5. 更新分类数据
          that.allCategories = categories;
          
          // 6. 检查当前活跃分类是否仍然有效，无效则重置为0
          if (!that.isCategorySelected(currentActive)) {
            that.activeCategory = 0;
          }
          
          console.log('获取到的分类数据:', categories);
        }
      });
    },
    
    // 拖拽排序相关
    startDrag(index) {
      this.isDragging = true;
      this.dragIndex = index;
      this.$refs.uToast.show({
        title: '拖动可调整顺序',
        position: 'bottom'
      });
    },
    
    // handleDragMove(e) {
    //   // 实际项目中可实现拖拽排序逻辑
    // },
    
    // stopDrag() {
    //   this.isDragging = false;
    //   this.dragIndex = -1;
    //   this.saveCategorySettings();
    //   this.$refs.uToast.show({
    //     title: '排序已保存',
    //     type: 'success',
    //     position: 'bottom'
    //   });
    // },
    
    onCategoryPopupOpen() {
      // 弹窗打开时的回调
      console.log('频道管理弹窗已打开');
    },
 
	
	loadNews(reset = false) {
	  this.isLoading = true;
	  
	  // 构建请求参数
	  const params = {
	    pageNum: reset ? 1 : this.pageNum, // 重置时从第1页开始
	    pageSize: this.pageSize,
	    infoCid: this.activeCategory , // 0表示全部，不传递分类ID
	    infoKeywords: this.searchKeyword?this.searchKeyword.trim() :'' // 搜索关键词
	  };
	
	  // 调用后台接口获取数据
	  this.$request("api/v1/appInformationList", "get", params)
	    .then(result => {
	      this.isLoading = false;
	      
	      if (result.code === 200 && result) {
	        const { rows, total, pages } = result; // 假设后台返回格式包含list、total、pages
	        
	        // 转换后台数据为前端所需格式
	        const newItems = rows.map(item => {
	          // 处理封面图片，支持多图(假设后台用逗号分隔多图地址)
	          const images = item.infoPic 
	            ? item.infoPic.split(';').filter(pic => pic.trim()) 
	            : [];
	            
	          return {
	            id: item.infoId,
	            type: item.infoType === 1 ? 'article' : item.infoType === 2 ? 'micro' : 'ad',
	            title: item.infoTitle,
	            desc: this.getDescription(item), // 从内容提取摘要
	            images,
	            source: this.getSourceName(item.infoAuthorId), // 可根据作者ID获取作者名称
	            time: this.formatTime(item.infoTime), // 格式化时间
	            views: item.infoViewCount || 0,
	            comments: item.infoCommentCount || 0,
	            likes: item.infoLikeCount || 0,
	            liked: false, // 需根据实际接口返回的点赞状态调整
	            categoryId: item.infoCid,
				author:this.getSourceName(item.authorName),
				content:item.infoContent,
				avatar:item.authorAvatar,
				keywords:item.infoKeywords,
				area:item.infoArea,
				authorId:item.infoAuthorId
	          };
	        });
	        
	        // 更新新闻列表
	        if (reset) {
	          this.newsList = newItems;
	        } else {
	          this.newsList = [...this.newsList, ...newItems];
	        }
	        
	        // 更新分页状态
	        this.pageNum = params.pageNum;
	        this.hasMore = this.pageNum < pages;
	        
	        // 过滤数据
	        this.filterData();
	      } else {
	        this.$refs.uToast.show({
	          title: '加载失败',
	          message: result.msg || '获取资讯列表失败',
	          type: 'error'
	        });
	      }
		  this.isLoading = false;
	    })
	    .catch(error => {
	      this.isLoading = false;
	      console.error('加载资讯失败:', error);
	      this.$refs.uToast.show({
	        title: '网络错误',
	        message: '获取资讯列表失败，请稍后重试',
	        type: 'error'
	      });
	    });
	},
	
	// 辅助方法：从内容提取摘要
	getDescription(item) {
	  if (!item.infoContent) return '';
	  // 简单处理：移除HTML标签并截取前100字符
	  const plainText = item.infoContent.replace(/<[^>]+>/g, '');
	  return plainText.length > 100 ? plainText.substring(0, 100) + '...' : plainText;
	},
	
	// 辅助方法：格式化时间
	formatTime(dateStr) {
	  if (!dateStr) return '';
	  const date = new Date(dateStr);
	  const now = new Date();
	  const diffMs = now - date;
	  const diffMins = Math.floor(diffMs / (1000 * 60));
	  const diffHours = Math.floor(diffMins / 60);
	  const diffDays = Math.floor(diffHours / 24);
	  
	  if (diffMins < 60) {
	    return `${diffMins}分钟前`;
	  } else if (diffHours < 24) {
	    return `${diffHours}小时前`;
	  } else if (diffDays < 30) {
	    return `${diffDays}天前`;
	  } else {
	    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
	  }
	},
	
	// 辅助方法：获取来源名称（需根据实际业务实现）
	getSourceName(author) {
	  // 实际项目中可能需要根据作者ID查询作者名称
	  return `作者：${author}`;
	},
	
    
    filterData() {
      let result = [...this.newsList];
      
      if (this.activeCategory !== 0) {
        result = result.filter(item => item.categoryId === this.activeCategory);
      }
      
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.trim().toLowerCase();
        result = result.filter(item => {
          // 处理title：如果为null/undefined则转为空字符串，否则转为小写
          const title = item.title ? item.title.toLowerCase() : '';
          // 处理desc：如果为null/undefined则转为空字符串，否则转为小写
          const desc = item.desc ? item.desc.toLowerCase() : '';
		  // 处理keywords：如果为null/undefined则转为空字符串，否则转为小写
		  const keywords = item.keywords ? item.keywords.toLowerCase() : '';
          
          // 检查是否包含关键词
          return title.includes(keyword) || desc.includes(keyword) ||keywords.includes(keyword) ;
        });
      }
      
      this.filteredNews = result;
	  this.isLoading = false;
    },
    
    loadMore() {
      if (this.isLoading || !this.hasMore) return;
      this.pageNum++;
      this.loadNews();
	  this.isLoading = false;
    },
    
    refreshNews() {
      this.pageNum = 1;
      this.loadNews(true);
	  this.isLoading = false;
    },
    
    gotoDetail(item) {
      this.saveToHistory(item);
      
      uni.navigateTo({
        url: `/pages/news/detail?id=${item.id}&type=${item.type}&time=${item.time}&image=${JSON.stringify(item.images)}&content=${item.content}&title=${item.title||''}&author=${item.author}&authorId=${item.authorId}&avatar=${item.avatar}&comments=${item.comments}&views=${item.views}&area=${item.area||''}`
      });
	  this.isLoading = false;
    },
    
    gotoPublish() {
      uni.navigateTo({
        url: `/pages/ucenter/creationEdit`
      });
	  this.isLoading = false;
    },
    
    saveToHistory(item) {
      let history = uni.getStorageSync('newsHistory') || [];
      history = history.filter(h => h.id !== item.id);
      history.unshift({
        id: item.id,
        title: item.title,
        time: item.infoTime,
        type: item.type,
        source: item.source,
        image: item.images && item.images.length > 0 ? item.images[0] : ''
      });
      
      if (history.length > 20) {
        history = history.slice(0, 20);
      }
      
      uni.setStorageSync('newsHistory', history);
	  this.isLoading = false;
    },
    
    // 统计数据点击处理
    handleStatClick(type, item) {
      if (type === 'like') {
        // 切换点赞状态
        const index = this.newsList.findIndex(i => i.id === item.id);
        if (index !== -1) {
          this.newsList[index].liked = !this.newsList[index].liked;
          this.newsList[index].likes += this.newsList[index].liked ? 1 : -1;
          this.filterData();
          
          this.$refs.uToast.show({
            title: this.newsList[index].liked ? '点赞成功' : '取消点赞',
            type: 'success'
          });
        }
      } else if (type === 'comment') {
        this.gotoDetail(item);
        this.$refs.uToast.show({
          title: '查看评论',
          position: 'bottom'
        });
      }
	  this.isLoading = false;
    },
    
    // 格式化数字（如 1000 -> 1k）
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + 'w';
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'k';
      }
      return num.toString();
    },
    
    getCategoryName() {
      const category = this.displayCategories.find(c => c.id === this.activeCategory);
      return category ? category.name : '资讯';
    },
    
    getRandomTime() {
      const hours = Math.floor(Math.random() * 24);
      const minutes = Math.floor(Math.random() * 60);
      const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
      return Math.random() > 0.3 ? `今天 ${timeStr}` : `昨天 ${timeStr}`;
    },
	navigateBack() {
	 uni.navigateBack({
	   delta: 1, // 返回的页面层级，默认为1
	   success: function(res) {
	     console.log('成功返回上一页');
	   },
	   fail: function(err) {
	     console.error('返回失败', err);
		 this.isLoading = false;
	   }
	 });
	this.isLoading = false;
	},
  }
};
</script>

<style lang="scss" scoped>
.news-page {
  background-color: #f5f5f7;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 顶部搜索区域 - 增大搜索框，减小发布按钮 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

  .search-container {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 60rpx;
    padding: 16rpx 24rpx; /* 增加内边距使搜索框更大 */
    margin-right: 15rpx;
    transition: all 0.3s ease;
    
    &.focused {
      background-color: #eeeeee;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }

    .search-icon {
      margin-right: 12rpx;
    }

    .search-input {
      flex: 1;
      background: transparent;
      font-size: 30rpx; /* 增大字体 */
      padding: 8rpx 0;
      line-height: 1.5;
      height: 40rpx; /* 增加输入框高度 */
	  width:300rpx;
    }

    .search-btn {
      background-color: #ff2442;
      color: #fff;
      padding: 10rpx 24rpx;
      font-size: 28rpx;
      margin-left: 10rpx;
      transition: all 0.2s ease;
      
      &:disabled {
        background-color: #ff7a8a;
      }
    }
  }

  .publish-btn {
    background-color: #ff2442;
    color: #fff;
    padding: 0rpx; /* 减小按钮大小，只保留图标 */
    margin-left: 5rpx;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.publish-btn-hover {
      background-color: #e01a36;
      transform: scale(1.05);
    }

    .publish-icon {
      margin-right: 0; /* 去掉图标右边距 */
    }
  }
}

/* 搜索历史样式 */
.search-history-popup {
  height: auto !important;
  padding: 0;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  box-shadow: 0 -2rpx 15rpx rgba(0, 0, 0, 0.05);
}

.search-history {
  background-color: #fff;
  padding: 20rpx;

  .history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #f5f5f5;

    .history-title {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
    }

    .clear-history {
      font-size: 26rpx;
      color: #999;
      padding: 5rpx 10rpx;
      border-radius: 40rpx;
      transition: all 0.2s ease;
      
      &.disabled {
        color: #ddd;
        pointer-events: none;
      }
      
      &:active {
        background-color: #f5f5f5;
      }
    }
  }

  .history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15rpx;
  }

  .history-tag {
    background-color: #f5f5f5;
    padding: 12rpx 25rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;
    transition: all 0.2s ease;
    padding-right: 45rpx;
    
    &:active {
      background-color: #eeeeee;
    }
    
    .tag-close {
      position: absolute;
      right: 12rpx;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: all 0.2s ease;
      
      &:active {
        color: #ff2442;
      }
    }
    
    &:hover .tag-close {
      opacity: 1;
    }
  }

  .history-empty {
    padding: 80rpx 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
    
    .empty-icon {
      opacity: 0.3;
    }
  }
}

/* 导航栏样式 - 优化编辑按钮点击区域 */
.category-scroll {
  background-color: #fff;
  padding: 8rpx 0;
  position: sticky;
  top: 0;
  z-index: 9;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #f5f5f5;

  .category-container {
    white-space: nowrap;
    padding: 0 15rpx;
    width: 100%;
    box-sizing: border-box;

    .category-item {
      display: inline-flex;
      align-items: center;
      padding: 12rpx 24rpx;
      font-size: 30rpx;
      color: #333;
      margin: 0 8rpx;
      border-radius: 40rpx;
      position: relative;
      transition: all 0.2s ease;
      
      &.active {
        color: #ff2442;
        font-weight: 500;
      }
      
      &:active {
        background-color: #f9f9f9;
      }
      
      .category-indicator {
        position: absolute;
        bottom: 5rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 16rpx;
        height: 16rpx;
        background-color: #ff2442;
        border-radius: 50%;
      }
    }
    
    .edit-category {
      color: #ff2442;
      font-size: 28rpx;
      margin: 0 8rpx 0 15rpx;
      padding: 12rpx 20rpx; /* 增加内边距，扩大点击区域 */
      display: inline-flex !important;
      border: 1px solid #ffeeee;
      border-radius: 40rpx;
      cursor: pointer; /* 明确指示可点击 */
      
      u-icon {
        margin-right: 8rpx;
      }
      
      &.edit-category-hover {
        background-color: #fff5f5;
      }
    }
  }
}

/* 内容列表样式 */
.news-list {
  padding: 15rpx;
}

.news-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.01);
  }
  
  &.last-item {
    margin-bottom: 30rpx;
  }
}

.news-type {
  display: inline-block;
  background-color: #f0f7ff;
  color: #1677ff;
  font-size: 24rpx;
  padding: 3rpx 15rpx;
  border-radius: 40rpx;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.micro-type {
  background-color: #fff0f0;
  color: #ff4d4f;
}

.article-content {
  margin-bottom: 15rpx;
}

.article-title {
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
  
  .news-item:active & {
    color: #666;
  }
}

.article-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-images {
  margin-top: 15rpx;
}

.multi-images {
  display: flex;
  gap: 10rpx;
}

.multi-img {
  width: 33%;
  height: 200rpx;
  border-radius: 10rpx;
  transition: transform 0.2s ease;
  overflow: hidden;
  
  &:active {
    transform: scale(0.98);
  }
}

.article-single {
  display: flex;
  gap: 15rpx;
}

.single-img {
  width: 200rpx;
  height: 150rpx;
  border-radius: 10rpx;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 15rpx;
  padding-top: 10rpx;
  border-top: 1px solid #f9f9f9;
}

.article-source {
  margin-right: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 180rpx;
}

.article-time {
  flex-shrink: 0;
}

.article-stats {
  display: flex;
  gap: 20rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5rpx;
  transition: all 0.2s ease;
  padding: 5rpx 8rpx;
  border-radius: 40rpx;
  
  &:active {
    background-color: #f5f5f5;
  }
  
  .liked-icon {
    animation: likePulse 0.5s ease;
  }
}

@keyframes likePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 空状态样式 */
.empty-state {
  padding: 150rpx 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
  
  .empty-list-icon {
    opacity: 0.2;
  }
  
  .empty-text {
    font-size: 30rpx;
    color: #999;
  }
  
  .empty-refresh {
    margin-top: 20rpx;
    border-color: #ddd;
    color: #666;
  }
}

/* 加载更多样式 */
.load-more {
  padding: 30rpx 0 50rpx;
  text-align: center;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  color: #666;
  font-size: 28rpx;
}

.load-more-btn {
  color: #666;
  font-size: 28rpx;
  border-color: #ddd;
  transition: all 0.2s ease;
  
  &.load-more-hover {
    background-color: #f5f5f5;
  }
}

/* 类目编辑弹窗样式 */
.category-edit-popup {
  height: 85vh !important;
  padding: 0;
}

.category-edit-dialog {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 30rpx 20rpx 50rpx;
  /* 关键：设置最大高度为屏幕的80% */
  max-height: 80vh;
  overflow-y: auto;
}

.dialog-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10rpx 0 25rpx;
  margin-bottom: 10rpx;
  border-bottom: 1px solid #f1f1f1;

  .dialog-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .dialog-close {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    cursor: pointer;
    width: 50rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    
    &.dialog-close-hover {
      background-color: #f5f5f5;
    }
  }
}

.dialog-section {
  margin-bottom: 30rpx;
  
  .section-title {
    display: block;
    font-size: 26rpx;
    color: #999;
    padding: 20rpx 10rpx;
    font-weight: 500;
  }
}

/* 已选频道样式 */
.selected-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  padding: 0 10rpx;
}

.selected-category {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 60rpx;
  padding: 15rpx 25rpx;
  font-size: 28rpx;
  color: #333;
  min-width: 140rpx;
  position: relative;
  transition: all 0.2s ease;
  
  &:active {
    background-color: #eeeeee;
  }
  
  &.sortable-ghost {
    background-color: #e8f4fd;
    border: 1px dashed #1677ff;
  }
  
  .drag-icon {
    margin-right: 10rpx;
    opacity: 0.5;
  }
  
  .category-name {
    flex: 1;
    text-align: center;
  }
  
  .remove-icon {
    position: absolute;
    right: 15rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 30rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e5e5e5;
    transition: all 0.2s ease;
    
    &.remove-icon-hover {
      background-color: #ffeeee;
      color: #ff2442;
    }
  }
}

/* 推荐频道样式 */
.recommend-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  padding: 0 10rpx;
}

.recommend-category {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 60rpx;
  padding: 15rpx 25rpx;
  font-size: 28rpx;
  color: #333;
  min-width: 140rpx;
  transition: all 0.2s ease;
  
  &.recommend-category-hover {
    background-color: #f0f0f0;
    border-color: #ddd;
  }
  
  .plus-icon {
    margin-left: 8rpx;
    width: 24rpx;
    height: 24rpx;
    background-color: #ff2442;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
    